<template>
  <div class="user-menu-container">
      <div 
        class="avatar-wrapper" 
        @mouseenter="handleMouseEnter"
        @mouseleave="handleMouseLeave"
      >
        <img :src="avatarIcon" alt="头像" class="avatar-icon">
        <!-- 用户菜单弹窗 -->
        <transition name="fade">
          <div 
            v-if="showMenu" 
            class="user-menu-dropdown" 
            @mouseenter="handleMenuEnter" 
            @mouseleave="handleMenuLeave"
          >
          <!-- 用户信息头部 -->
          <div class="user-menu-header">
            <div class="user-avatar-large">
              <img :src="avatarIcon" alt="头像" class="avatar-large-img">
            </div>
            <div class="user-info">
              <div class="user-name">{{ userName }}</div>
              <div class="user-id-wrapper">
                <span class="user-id">ID: {{ userId }}</span>
                <img :src="copyIcon" alt="复制" class="copy-id-btn" @click.stop="handleCopyUserId" title="复制ID">
              </div>
            </div>
          </div>
          <div class="user-motto">{{ motto }}</div>
          
          <!-- SVIP区域 -->
          <div class="user-menu-svip">
            <div class="svip-info">
              <img :src="svipIcon" alt="SVIP" class="svip-icon">
              <span class="svip-text">黑钻会员</span>
            </div>
            <button class="upload-works-btn">上传作品</button>
          </div>
          
          <!-- 菜单列表 -->
          <div class="user-menu-list">
            <div class="menu-item" @click="handleMenuClick('works')">
              <span class="menu-text">作品管理<span class="menu-dot"></span></span>
              <svg width="8" height="12" viewBox="0 0 8 12" fill="none" class="menu-arrow">
                <path d="M1 1L6 6L1 11" stroke="#19D8B6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <div class="menu-item" @click="handleMenuClick('account')">
              <span>账户管理</span>
              <svg width="8" height="12" viewBox="0 0 8 12" fill="none" class="menu-arrow">
                <path d="M1 1L6 6L1 11" stroke="#19D8B6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <div class="menu-item" @click="handleMenuClick('message')">
              <span class="menu-text">消息通知<span class="menu-dot"></span></span>
              <svg width="8" height="12" viewBox="0 0 8 12" fill="none" class="menu-arrow">
                <path d="M1 1L6 6L1 11" stroke="#19D8B6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <div class="menu-item" @click="handleMenuClick('collection')">
              <span>我的收藏</span>
              <svg width="8" height="12" viewBox="0 0 8 12" fill="none" class="menu-arrow">
                <path d="M1 1L6 6L1 11" stroke="#19D8B6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <div class="menu-item" @click="handleMenuClick('recharge')">
              <span>充值中心</span>
              <svg width="8" height="12" viewBox="0 0 8 12" fill="none" class="menu-arrow">
                <path d="M1 1L6 6L1 11" stroke="#19D8B6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <div class="menu-item" @click="handleLogout">
              <span>退出登陆</span>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserMenu',
  props: {
    avatar: {
      type: String,
      default: ''
    },
    userName: {
      type: String,
      default: '烟雨下扬州'
    },
    userId: {
      type: String,
      default: '38382222'
    },
    motto: {
      type: String,
      default: '天下兴亡，匹夫有责。只可意会，不可言传。'
    }
  },
  data() {
    return {
      showMenu: false,
      mouseLeaveTimer: null,
      avatarIcon: require('~/assets/images/img/B-01首页_slices/头像.png'),
      copyIcon: require('~/assets/images/img/B-02作品_详情页_slices/复制按钮.png'),
      svipIcon: require('~/assets/images/img/个人中心_头像弹窗_slices/等级_VIP图标.png')
    }
  },
  methods: {
    handleMouseEnter() {
      if (this.mouseLeaveTimer) {
        clearTimeout(this.mouseLeaveTimer)
        this.mouseLeaveTimer = null
      }
      this.showMenu = true
    },
    handleMouseLeave() {
      // 延迟隐藏，给用户时间移动到菜单上
      this.mouseLeaveTimer = setTimeout(() => {
        this.showMenu = false
      }, 200)
    },
    handleMenuEnter() {
      if (this.mouseLeaveTimer) {
        clearTimeout(this.mouseLeaveTimer)
        this.mouseLeaveTimer = null
      }
      this.showMenu = true
    },
    handleMenuLeave() {
      this.showMenu = false
    },
    handleCopyUserId() {
      const userId = this.userId
      try {
        if (navigator.clipboard && navigator.clipboard.writeText) {
          navigator.clipboard.writeText(userId).then(() => {
            alert('ID已复制到剪贴板')
          })
        } else {
          // 降级方案
          const textArea = document.createElement('textarea')
          textArea.value = userId
          textArea.style.position = 'fixed'
          textArea.style.opacity = '0'
          document.body.appendChild(textArea)
          textArea.select()
          document.execCommand('copy')
          document.body.removeChild(textArea)
          alert('ID已复制到剪贴板')
        }
      } catch (err) {
        console.error('复制失败:', err)
      }
    },
    handleMenuClick(menuType) {
      this.$emit('menu-click', menuType)
      console.log('点击菜单:', menuType)
      
      // 根据菜单类型跳转到对应页面
      if (menuType === 'works') {
        this.$router.push('/works/manage')
        this.showMenu = false
      } else if (menuType === 'account') {
        // 账户管理页面
        // this.$router.push('/account/manage')
      } else if (menuType === 'message') {
        // 消息通知页面
        // this.$router.push('/message')
      } else if (menuType === 'collection') {
        // 我的收藏页面
        // this.$router.push('/collection')
      } else if (menuType === 'recharge') {
        // 充值中心页面
        // this.$router.push('/recharge')
      }
    },
    handleLogout() {
      this.showMenu = false
      this.$emit('logout')
    }
  }
}
</script>

<style scoped>
.user-menu-container {
  position: relative;
}

.avatar-wrapper {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: visible;
}

.avatar-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* 用户菜单弹窗 */
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 248px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 2000;
  overflow: hidden;
}

/* 淡入淡出动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

/* 用户信息头部 */
.user-menu-header {
  background: linear-gradient(to bottom, #B3F6EA 0%, #B3F6EA 20px, rgba(179, 246, 234, 0.9) 25px, rgba(179, 246, 234, 0.7) 30px, rgba(179, 246, 234, 0.5) 35px, rgba(179, 246, 234, 0.3) 40px, rgba(179, 246, 234, 0.1) 42px, white 45px, white 100%);
  padding: 20px 20px 15px 20px;
  display: flex;
  gap: 15px;
}

.user-avatar-large {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar-large-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-size: 18px;
  color: #2E2E30;
  margin-bottom: 8px;
}

.user-id-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.user-id {
  font-size: 12px;
  color: #666;
}

.copy-id-btn {
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.copy-id-btn:hover {
  opacity: 0.7;
}

.user-motto {
  background: white;
  padding: 0 20px 20px 20px;
  font-size: 12px;
  color: #2E2E30;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* SVIP区域 */
.user-menu-svip {
  background: #2E2E30;
  padding: 8px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 60px;
  width: auto;
  margin: 0 20px;
  border-radius: 4px;
}

.svip-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.svip-icon {
  width: auto;
  height: 12px;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 0;
}

.svip-text {
  font-size: 14px;
  color: #F7F7F7;
  font-weight: 500;
}

.upload-works-btn {
  background: #37373A;
  color: white;
  border: none;
  padding: 2px 14px;
  border-radius: 100px;
  font-size: 14px;
  cursor: pointer;
  width: fit-content;
  transition: background 0.3s;
}

.upload-works-btn:hover {
  background: #555;
}

/* 菜单列表 */
.user-menu-list {
  padding: 10px 0;
}

.menu-item {
  padding: 12px 20px;
  font-size: 14px;
  color: #2E2E30;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.2s;
  position: relative;
}

.menu-text {
  position: relative;
  display: inline-block;
}

.menu-item:hover {
  color: #19D8B6;
}

.menu-item .menu-arrow {
  display: none;
  flex-shrink: 0;
}

.menu-item:hover .menu-arrow {
  display: block;
}

.menu-dot {
  position: absolute;
  top: 2px;
  right: -8px;
  width: 4px;
  height: 4px;
  background: #FC952F;
  border-radius: 50%;
  flex-shrink: 0;
}
</style>

